<template>
	<!-- 密码验证哦 -->
	<toast :visible.sync="visibleToast" :showClose="false">
		<template slot="content">
			<view class="toast_warp">
				<view class="f f_align f_align_center title">
					<view class=""></view>
					<text class="bold">{{title}}</text>
					<i class="iconfont iconlianhe49" @click="visibleToast = false"></i>
				</view>
				<input :auto-focus="true" type="password" class="areaStyle" v-model="password" maxlength="20" placeholder="输入支付密码" />
				<button :loading="isLoading" class="biding_btn bold" @click="handlerExamine()">
					{{isLoading ? '验证中...' : '确认密码'}}
				</button>
			</view>
		</template>
	</toast>
</template>

<script>
	export default {
		name:"pwInput",
		props:{
			isLoading:{
				type:Boolean,
				default:false
			},
			title:{
				type:String,
				default:'需要验证您的支付密码'
			}
		},
		data() {
			return {
				visibleToast:false,
				password:''
			};
		},
		methods:{
			//确认
			handlerExamine(){
				const _this = this;
				if(_this.password == ''){
					return _this.$showToast('请输入您的支付密码～')
				}
				if(_this.isLoading){
					return _this.$showToast('请求中，请稍等～');
				}
				_this.$emit('input-ok',_this.password);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.biding_btn{
		width: 300rpx;
	}
	.toast_warp{
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		bottom: 0;left: 0;right: 0;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding:24rpx 34rpx;
		.title{
			padding-bottom: 24rpx;
			font-size: 32rpx;
			.iconfont{
				transform: rotateZ(45deg);
			}
		}
		.areaStyle{
			box-sizing: border-box;
			width: 100%;
			width: 100%;
			height: 80rpx;
			border: solid 1rpx #3F536E;
			border-radius: 8rpx;
			padding: 10rpx;
		}
	}

</style>
